// Avue响应式配置系统

export interface ResponsiveConfig {
  span: number
  xs?: number
  sm?: number
  md?: number
  lg?: number
  xl?: number
}

// Apple设计系统断点
export const BREAKPOINTS = {
  xs: 375,   // iPhone SE
  sm: 768,   // iPad竖屏
  md: 1024,  // iPad横屏
  lg: 1440,  // 桌面
  xl: 1920   // 大屏
} as const

// Avue表格响应式配置
export const tableResponsiveConfig = {
  // 默认响应式配置
  default: {
    span: 24,
    xs: 24,    // 手机端全宽
    sm: 12,    // 小屏幕半宽
    md: 8,     // 中屏幕三分之一
    lg: 6,     // 大屏幕四分之一
    xl: 4      // 超大屏幕六分之一
  },
  
  // 表格列响应式配置
  column: {
    // 主要信息列（总是显示）
    primary: {
      span: 24,
      xs: 24,
      sm: 12,
      md: 8,
      lg: 6
    },
    
    // 次要信息列（中屏以上显示）
    secondary: {
      span: 0,
      xs: 0,
      sm: 0,
      md: 8,
      lg: 6,
      xl: 4
    },
    
    // 辅助信息列（大屏以上显示）
    auxiliary: {
      span: 0,
      xs: 0,
      sm: 0,
      md: 0,
      lg: 6,
      xl: 4
    },
    
    // 操作列（始终显示但宽度自适应）
    action: {
      span: 24,
      xs: 24,
      sm: 12,
      md: 8,
      lg: 4,
      xl: 3
    }
  }
}

// Avue表单响应式配置
export const formResponsiveConfig = {
  // 单列布局（移动端）
  singleColumn: {
    span: 24,
    xs: 24,
    sm: 24,
    md: 24,
    lg: 24,
    xl: 24
  },
  
  // 双列布局（平板以上）
  doubleColumn: {
    span: 24,
    xs: 24,
    sm: 12,
    md: 12,
    lg: 12,
    xl: 12
  },
  
  // 三列布局（桌面以上）
  tripleColumn: {
    span: 24,
    xs: 24,
    sm: 24,
    md: 8,
    lg: 8,
    xl: 8
  },
  
  // 四列布局（大屏以上）
  quadColumn: {
    span: 24,
    xs: 24,
    sm: 24,
    md: 12,
    lg: 6,
    xl: 6
  },
  
  // 特殊字段配置
  special: {
    // 全宽字段（如备注、描述）
    fullWidth: {
      span: 24,
      xs: 24,
      sm: 24,
      md: 24,
      lg: 24,
      xl: 24
    },
    
    // 半宽字段（如姓名、电话）
    halfWidth: {
      span: 24,
      xs: 24,
      sm: 12,
      md: 12,
      lg: 12,
      xl: 12
    },
    
    // 三分之一宽度（如年龄、性别）
    thirdWidth: {
      span: 24,
      xs: 24,
      sm: 24,
      md: 8,
      lg: 8,
      xl: 8
    }
  }
}

// Avue卡片响应式配置
export const cardResponsiveConfig = {
  // 统计卡片
  stats: {
    span: 24,
    xs: 24,    // 手机端一行一个
    sm: 12,    // 平板端一行两个
    md: 8,     // 中屏一行三个
    lg: 6,     // 大屏一行四个
    xl: 4      // 超大屏一行六个
  },
  
  // 功能卡片
  feature: {
    span: 24,
    xs: 24,
    sm: 24,
    md: 12,
    lg: 8,
    xl: 6
  },
  
  // 内容卡片
  content: {
    span: 24,
    xs: 24,
    sm: 24,
    md: 24,
    lg: 12,
    xl: 8
  }
}

// 获取当前设备类型
export const getDeviceType = (): 'mobile' | 'tablet' | 'desktop' => {
  const width = window.innerWidth
  
  if (width < BREAKPOINTS.sm) {
    return 'mobile'
  } else if (width < BREAKPOINTS.lg) {
    return 'tablet'
  } else {
    return 'desktop'
  }
}

// 获取当前断点
export const getCurrentBreakpoint = (): keyof typeof BREAKPOINTS => {
  const width = window.innerWidth
  
  if (width < BREAKPOINTS.sm) return 'xs'
  if (width < BREAKPOINTS.md) return 'sm'
  if (width < BREAKPOINTS.lg) return 'md'
  if (width < BREAKPOINTS.xl) return 'lg'
  return 'xl'
}

// 检查是否为指定断点或以上
export const isBreakpointUp = (breakpoint: keyof typeof BREAKPOINTS): boolean => {
  return window.innerWidth >= BREAKPOINTS[breakpoint]
}

// 检查是否为指定断点或以下
export const isBreakpointDown = (breakpoint: keyof typeof BREAKPOINTS): boolean => {
  return window.innerWidth < BREAKPOINTS[breakpoint]
}

// 根据设备类型获取Avue配置
export const getResponsiveConfig = (
  type: 'table' | 'form' | 'card', 
  variant?: string
): ResponsiveConfig => {
  const deviceType = getDeviceType()
  
  switch (type) {
    case 'table':
      return tableResponsiveConfig.column[variant as keyof typeof tableResponsiveConfig.column] || 
             tableResponsiveConfig.default
             
    case 'form':
      if (deviceType === 'mobile') {
        return formResponsiveConfig.singleColumn
      } else if (deviceType === 'tablet') {
        return formResponsiveConfig.doubleColumn
      } else {
        return formResponsiveConfig[variant as keyof typeof formResponsiveConfig] || 
               formResponsiveConfig.tripleColumn
      }
      
    case 'card':
      return cardResponsiveConfig[variant as keyof typeof cardResponsiveConfig] || 
             cardResponsiveConfig.stats
             
    default:
      return tableResponsiveConfig.default
  }
}

// 创建响应式监听器
export const createResponsiveListener = (callback: (deviceType: string, breakpoint: string) => void) => {
  let currentDeviceType = getDeviceType()
  let currentBreakpoint = getCurrentBreakpoint()
  
  const handleResize = () => {
    const newDeviceType = getDeviceType()
    const newBreakpoint = getCurrentBreakpoint()
    
    if (newDeviceType !== currentDeviceType || newBreakpoint !== currentBreakpoint) {
      currentDeviceType = newDeviceType
      currentBreakpoint = newBreakpoint
      callback(newDeviceType, newBreakpoint)
    }
  }
  
  window.addEventListener('resize', handleResize)
  
  // 返回清除监听器的函数
  return () => {
    window.removeEventListener('resize', handleResize)
  }
}

// Avue表格移动端优化配置
export const getMobileTableConfig = () => ({
  // 移动端隐藏不重要的列
  column: [
    {
      label: '姓名',
      prop: 'name',
      minWidth: 100,
      fixed: true // 固定重要列
    },
    {
      label: '联系方式',
      prop: 'phone',
      minWidth: 120,
      hide: isBreakpointDown('sm') // 小屏隐藏
    },
    {
      label: '创建时间',
      prop: 'createTime',
      minWidth: 150,
      hide: isBreakpointDown('md') // 中屏以下隐藏
    }
  ],
  
  // 移动端分页配置
  page: {
    pageSize: isBreakpointDown('sm') ? 10 : 20,
    pageSizes: isBreakpointDown('sm') ? [5, 10, 20] : [10, 20, 50, 100],
    layout: isBreakpointDown('sm') 
      ? 'prev, pager, next' 
      : 'total, sizes, prev, pager, next, jumper'
  },
  
  // 移动端工具栏配置
  menu: {
    addBtn: true,
    editBtn: true,
    delBtn: true,
    searchBtn: !isBreakpointDown('sm'), // 移动端隐藏搜索按钮
    columnBtn: !isBreakpointDown('md'), // 中屏以下隐藏列设置
    refreshBtn: !isBreakpointDown('sm')
  }
})

// Avue表单移动端优化配置
export const getMobileFormConfig = () => ({
  // 移动端标签位置
  labelPosition: isBreakpointDown('sm') ? 'top' : 'left',
  
  // 移动端标签宽度
  labelWidth: isBreakpointDown('sm') ? 'auto' : 120,
  
  // 移动端间距
  gutter: isBreakpointDown('sm') ? 0 : 20,
  
  // 移动端按钮配置
  menuBtn: isBreakpointDown('sm'),
  submitBtn: true,
  submitText: '提交',
  emptyBtn: !isBreakpointDown('sm'), // 移动端隐藏清空按钮
  emptyText: '清空'
})

// 导出所有配置
export default {
  BREAKPOINTS,
  tableResponsiveConfig,
  formResponsiveConfig,
  cardResponsiveConfig,
  getDeviceType,
  getCurrentBreakpoint,
  isBreakpointUp,
  isBreakpointDown,
  getResponsiveConfig,
  createResponsiveListener,
  getMobileTableConfig,
  getMobileFormConfig
}